<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>确认订单信息</title>
    <link rel="stylesheet" href="stylesheets/bootstrap.min.css">
    <link rel="stylesheet" href="./stylesheets/bootstrap.min.css">
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        html,
        body {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .allbox {
            width: 70%;
            position: relative;
            margin-left: 16.666%;
            margin-top: 50px;
        }

        .head {
            border-bottom: 1px solid #e4e4e4;
        }

        h1 {
            display: inline-block;
        }

        .jindu {
            width: 40%;
            height: 100%;
            float: right;
            position: relative;
            top: 50px;
        }

        .jindu ul {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 16px;
        }

        .goal {
            color: #f2953f;
        }

        /*收货人信息*/
        .shrxx {
            width: 100%;
            /* height: 275px; */
            border-bottom: 1px solid #e4e4e4;
        }

        .new-addres {
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: space-between;
        }

        #newAddress {
            border: none;
            outline: none;
            background: #f2953f;
            border-radius: 6px;
            color: white;
        }

        /*地址信息*/
        .address {
            width: 100%;
            margin-top: 10px;
        }

        .address li {
            width: 100%;
            height: 36px;
            border: 1px solid #e4e4e4;
            background: #f4fff2;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            font-size: 12px;
            justify-content: space-between;
        }

        .address li input {
            width: 15px;
            height: 15px;
            margin-left: 10px;
        }

        .address li p {
            display: inline-block;
            margin-left: 10px;
        }

        .address span {
            margin-left: 10px;
            color: #c1c6c0;
        }

        .resize p {
            float: right;
            margin-right: 20px;
            color: #84b07d;
            font-size: 14px;
        }

        .resize .sizeMr {
            color: #f2953f;
        }

        /*展开收起地址*/
        .zksq {
            width: 100%;
            height: 30px;
            margin-top: 10px;
        }

        .zksq p {
            color: #7aa873;
            float: left;
            margin-right: 20px;

        }


        /*商品信息*/
        .goodsInfo {
            width: 100%;
            height: 547px;
            border-bottom: 1px solid #e4e4e4;
            margin-top: 20px;
            margin-bottom: 10px;
        }

        .goodsInfo p {
            font-size: 16px;
        }

        .gsInfoTab {
            border: 1px solid #e4e4e4;
            width: 100%;
            height: 490px;
        }

        .row2 {
            width: 100%;
            height: 48px;
            background: #e4e4e4;
            line-height: 48px;
            font-size: 20px;
        }

        .row3 {
            width: 100%;
            height: 118px;
            line-height: 118px;
            border-bottom: 1px solid #e4e4e4;
            font-size: 12px;
        }

        .count {
            height: 30px;
            margin-top: 33%;
            border: 1px solid #e4e4e4;
            line-height: 30px;
            display: flex;
            justify-content: space-between;
        }

        .minus,
        .add {
            background: #f2f2f2;
        }

        .row4 {
            height: 78px;
            line-height: 78px;
            font-size: 12px;
        }

        .se {
            color: red;
            font-size: 16px;
        }

        /*发票信息*/
        .fpxx {
            width: 100%;
            height: 120px;
            border-bottom: 1px solid #e4e4e4;
            margin-bottom: 20px;
        }

        .fpxx p {
            font-size: 16px;
        }

        .fpxx div {
            margin-bottom: 10px;
        }

        .fpxx label {
            margin-right: 20px;
        }

        .fpxx em {
            color: red;
        }

        .ddbz {
            width: 100%;
            height: 80px;
            border-bottom: 1px solid #e4e4e4;
            margin-bottom: 20px;
        }

        .ddbz p {
            font-size: 16px;
        }

        .ddbz input {
            width: 50%;
        }

        /*次日达·礼拜五专享*/
        .lbwzx {
            width: 100%;
            /*height: 240px;*/
            border-bottom: 1px solid #e4e4e4;
            margin-bottom: 20px;
        }

        .lbwzx p {
            font-size: 16px;
            color: #699f61;
            margin-bottom: 20px;
        }

        .choiceTime p {
            color: black;
            display: inline-block;
            margin-right: 30px;
        }



        #cTime {
            width: 70%;
            height: 130px;
            background: #dcffd8;
            border: 1px solid #d3d3d3;
            display: none;
            margin-left: 15%;
            margin-bottom: 30px;
        }

        .cTime-1 {
            width: 92%;
            margin-left: 4%;
            margin-top: 20px;
        }

        .cTime-1 table {
            background: white;
            width: 100%;
            text-align: center;
            cursor: pointer;
        }

        .cTime-sure {
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .cTime-sure button {
            margin-right: 20px;
            border: none;
            outline: none;
            background: #f08200;
            color: white;
            border-radius: 6px;
        }

        /*提交订单*/
        .tjdd {
            width: 100%;
            height: 100px;
            margin-bottom: 20px;
        }

        .tjdd p {
            text-align: right;
        }

        .tjdd p span {
            color: red;
            font-size: 20px;
        }

        .tjdd p em {
            color: #f08200;
            margin-left: 20px;
        }

        .tjdd div button {
            float: right;
            outline: none;
            border: none;
            background: #f08200;
            color: white;
            border-radius: 6px;
        }

        #list1 table {
            width: 100%;
            border-top: 1px #ccc;
            text-align: left;
            border: 1px solid #ccc;
            margin-top: 10px;
            margin-bottom: 30px;
            text-align: center;
        }

        #list1 table td {
            height: 80px;
            border: none;
            border-top: 1px solid #ccc;
            overflow: hidden;
        }

        #list1 table img {
            width: 100px;
            height: 80px;
        }

        #list1 table th {
            background: #ccc;
            height: 40px;
            text-align: center;
        }

        .xunzhong,
        #inpHeader {
            width: 20px;
            height: 20px;

        }

        .jian,
        .jia {
            width: 20px;
            height: 15px;
            border: 1px solid #ccc;
            position: relative;
            top: 2px;
            line-height: 15px;
        }

        #tiaozhuan {
            background: #f08200;
            padding: 2px 5px;
            border-radius: 5px;
        }

        #Modeltitle2 {
            width: 100%;
            height: 70px;
            font: 15px/70px 'simhei';
            color: #498e3d;
            text-indent: 2em;
            border-bottom: 1px solid #d3d3d3;
        }

        .smallWin {
            margin-top: 90px;
        }

        .smallWin .window1 div {
            display: inline-block;
        }

        .smallWin .window1 div:nth-child(1) {
            font-size: 100px;
            color: #f08200;
            margin-left: 100px;
            margin-right: 40px;
        }

        .smallWin .window1 div:nth-child(2) {
            color: #9b9b9b;
        }

        .smallWin .window2 {
            text-align: center;
            margin-top: 100px;
        }

        .smallWin .window2 span {
            display: inline-block;
            width: 190px;
            height: 36px;
            color: #fff;
            text-align: center;
            line-height: 36px;
            font-size: 1.6rem;
            background: #F08200;
            border-radius: 5px;
        }

        .smallWin .window2 .payquyu {
            background: #498e3d;
            margin-left: 50px;
        }

        #wenxintishi {
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            background: rgba(24, 20, 20, 0.493);
            display: none;
        }

        #list3 {
            width: 60%;
            margin-left: 16.666%;
            border-top: 1px #fff;
            font-size: 12px;
            background: #fff;
            margin-top: 100px;
            margin-left: 260px;
            padding-left: 30px;
            padding-top: 30px;
            padding-bottom: 30px;
        }

        #list2 {
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            background: rgba(24, 20, 20, 0.493);
            display: none;
        }

        #list2 form {
            width: 30%;
            margin-left: 16.666%;
            border-top: 1px #fff;
            font-size: 12px;
            background: #fff;
            margin-top: 100px;
            margin-left: 500px;
            padding-left: 30px;
            padding-top: 30px;
            padding-bottom: 30px;
        }

        #butqz {
            height: 30px;
            border: 1px solid;
            width: 200px;
            margin-left: 50px;
            background: #f08200;
            border-radius: 5px;
        }

        #list2 form div {
            margin-top: 8px;
        }

        #list2 form input {
            border: 1px solid #ccc;
        }

        #list2 table {
            width: 70%;
            margin-left: 16.666%;
            border-top: 1px #ccc;
            text-align: center;

        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div id="lxcbox">
        <div id="lxcheader"></div>
    </div>
    <div class="allbox">

        <div class="head">
            <div class="head-1">
                <h1 class="logo">
                    <img src="./images/lxc/logo.png" alt="">
                </h1>
                <div class="jindu">
                    <ul>
                        <li>我的购物车</li>
                        <li>></li>
                        <li class="goal">确认订单信息</li>
                        <li>></li>
                        <li>订单提交成功</li>
                    </ul>
                </div>
            </div>
        </div>
        <!--    主体部分-->
        <div class="main">
            <div class="main-1">
                <!--            收货人信息-->
                <div class="shrxx">
                    <div class="new-addres">
                        <p>收货人信息</p>
                        <button id="newAddress">使用新地址</button>
                    </div>
                    <ul class="address">
                        <!-- <li>
                            <div>
                                <input type="radio">
                                <p>但小兵&nbsp;北京&nbsp; 北京市&nbsp;昌平区&nbsp;天通苑昨天第一城38号楼&nbsp;固定电话010-12345678</p>
                                <span>默认地址</span>
                            </div>
                            <div class="resize">
                                <p class="xiugai">修改</p>
                                <p class="shanchu">删除</p>
                            </div>
                        </li> -->



                    </ul>
                    <!--                展开收起地址-->
                    <div class="zksq">
                        <p id="zhankai">展开其他地址</p>
                        <p id="sq">收起地址</p>
                    </div>
                </div>

                <!--            商品信息-->
                <div id="list1">
                    <table>
                        <tr>
                            <th style="width: 50px;"><input type="checkbox" id="inpHeader"></th>
                            <th style="width: 100px;">爱果果的水果店</th>
                            <th style="width: 100px;">规格</th>
                            <th style="width: 100px;">单价</th>
                            <th style="width: 100px;">数量</th>
                            <th style="width: 100px;">金额</th>
                            <th style="width: 100px;">操作</th>
                        </tr>

                        <tr id="jine">
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>商品金额 <strong id="zhongjine1">0</strong></td>

                        </tr>
                        <tr>
                            <td id="quanxuan" style="color: red;">全选</td>
                            <td id="piliangdel">批量删除</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td colspan="2">商品金额 <strong>￥<span id="zhongjine"></span></strong>
                            </td>

                        </tr>
                    </table>
                </div>

                <!--            开票信息-->
                <div class="fpxx">
                    <p>开票信息</p>
                    <div>
                        <input type="radio" id="noXu">
                        <label for="noXu">不需要</label>
                        <input type="radio" id="geren">
                        <label for="geren">个人</label>
                        <input type="radio" id="danwei">
                        <label for="danwei">单位</label>
                    </div>
                    <label>发票抬头：</label>
                    <input type="text">
                    <em>*</em>
                    <span>请填写后认真核对发票信息</span>
                </div>
                <!--            添加订单备注-->
                <div class="ddbz">
                    <p>添加订单备注</p>
                    <input type="text" placeholder="限45个字，请填写有关商品、支付、发票等信息">
                </div>

                <!--            开票信息-->
                <div class="fpxx">
                    <p>开票信息</p>
                    <div>
                        <input type="radio" id="noXu">
                        <label for="noXu">不需要</label>
                        <input type="radio" id="geren">
                        <label for="geren">个人</label>
                        <input type="radio" id="danwei">
                        <label for="danwei">单位</label>
                    </div>
                    <label>发票抬头：</label>
                    <input type="text">
                    <em>*</em>
                    <span>请填写后认真核对发票信息</span>
                </div>
                <!--            添加订单备注-->
                <div class="ddbz">
                    <p>添加订单备注</p>
                    <input type="text" placeholder="限45个字，请填写有关商品、支付、发票等信息">
                </div>
                <!--            次日达。礼拜五专享-->
                <div class="lbwzx">
                    <p>次日达·礼拜五专享:</p>
                    <div class="choiceTime">
                        <p>选择送达时间：2016年11月11日&nbsp;&nbsp;<span id="time">11:00~13:00</span>
                        </p>
                        <em id="alter">点击修改</em>
                        <div id="cTime">
                            <div class="cTime-1">
                                <table border="1" id="tab">
                                    <tr>
                                        <td>10:00~13:00</td>
                                        <td>11:00~14:00</td>
                                        <td>12:00~15:00</td>
                                        <td>13:00~16:00</td>
                                        <td>14:00~17:00</td>
                                    </tr>
                                    <tr>
                                        <td>15:00~18:00</td>
                                        <td>16:00~19:00</td>
                                        <td>17:00~20:00</td>
                                        <td>18:00~21:00</td>
                                        <td>19:00~22:00</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="cTime-sure">
                                <button id="cancel">取消</button>
                                <button id="confirm">确定</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!--            提交订单-->
                <div class="tjdd">
                    <p>实付金额：￥<span id="zhongjine2"></span></p>
                    <p>订单完成后可获得积分：<em id="zhongjine3"></em>积分</p>
                    <div>
                        <button>提交订单</button>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <!-- 尾部 -->
    <div id="lxcfooter">
        <div id="lxcfooter1"></div>
        <div id="lxcfooter2"></div>
        <div id="lxcbottom"></div>
    </div>
    <div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
            </div>
        </div>
    </div>
    <div id="wenxintishi">
        <div id="list3">
            <div id="Modeltitle2">温馨提示</div>
            <div class="smallWin">
                <div class="window1">
                    <div class="iconfont icon-jinggao1"></div>
                    <div>
                        <p>新疆哈密瓜</p>
                        <p>无法送到指定区域，请到购物车中删除商品</p>
                        <p>或修改配送地址后重新提交订单</p>
                    </div>
                </div>
                <p class="window2">
                    <span class="return">
                        返回购物车修改</span>
                    <span class="payquyu">
                        修改配送区域</span>
                </p>
            </div>
        </div>
    </div>
    <div id="list2">
        <form action="" method="post" enctype="multipart/form-data">
            <div>
                <label for=""><span>收货人信息</span>
                    <input type="text" name="" id="">
                </label>
            </div>

            <div>
                <label for=""><span>所在地址&nbsp;&nbsp;&nbsp;</span>
                    <input type="text" name="" id="">
                </label>
            </div>

            <div>
                <label for=""><span>详情地址&nbsp;&nbsp;&nbsp;</span>
                    <select name="" id="selProvince">
                        <option value="" class="opt">----请选择----</option>
                    </select>
                    <select name="" id="selCity">
                        <option value="" class="opt">----请选择----</option>
                    </select>
                    <select name="" id="selCountry">
                        <option value="" class="opt">----请选择----</option>
                    </select>
                </label>
            </div>
            <div>
                <label for=""><span>练习电话&nbsp;&nbsp;&nbsp;</span>
                    <input type="text" name="" id="">
                </label>
            </div>
            <div>
                <label for="">
                    <input type="button" name="" id="butqz" value="确认并设置为默认地址">
                </label>
            </div>
        </form>
    </div>
    <div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
            </div>
        </div>
    </div>
</body>

</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./javascripts/bootstrap.min.js"></script>
<script src="./javascripts/lxcheader.js"></script>
<script>
        //ajax请求
        {

//添加到 #jine前面
$.ajax({
    type: "post",
    url: "/lxcgouwuche/biao",
    data: {
        goodId: localStorage.userID

    },
    dataType: "json",
    success: function (response) {
        console.log(response);
        
        for (let i = 0; i < response.length; i++) {
            var pp = $('<tr>').insertBefore('#jine');
            var t1 = $('<td>').appendTo(pp);
            var t2 = $('<td>').appendTo(pp);
            var t3 = $('<td>').appendTo(pp).html(response[i].car_zl);
            var t4 = $('<td>').appendTo(pp).addClass('danjia').html('￥');
            var t5 = $('<td>').appendTo(pp);
            var t6 = $('<td>').appendTo(pp).addClass('jiaqian').html('￥');
            var t7 = $('<td>').appendTo(pp).addClass('del').html('删除');
            $('<input type="checkbox" class="xunzhong ">').appendTo(t1);

            $('<img>').appendTo(t2).attr({
                src: response[i].car_img,
            });
            $('<span>').appendTo(t2).html(response[i].car_name).css({
                display: 'inline-block',
                width: '20px',
                height: '80px'
            });
            $('<span>').appendTo(t4).html(response[i].car_price);
            $('<input type="button" value="-" class="jian">').appendTo(t5);
            $('<span>').appendTo(t5).html(1);
            $('<input type="button" value="+" class="jia">').appendTo(t5);
            $('<span>').appendTo(t6).html(response[i].car_price);

        }
        jisuan();

    }
});
}


    if (localStorage.userID) {
        //地址操作
        {

            $.ajax({
                type: "post",
                url: "/lxcshangjiabupeisong/biao",
                data: {
                    past: localStorage.userID
                },
                dataType: "json",
                success: function (response) {
                    console.log(response);

                    for (let i = 0; i < response.length; i++) {
                        var dress = $('<li>').appendTo('.address');
                        let div1 = $('<div>').appendTo(dress);
                        let div2 = $('<div>').appendTo(dress).addClass('resize');
                        $('<input type="radio">').appendTo(div1);
                        $('<p>').appendTo(div1).html(response[i].userName + '&nbsp;' + response[i].address +
                            '&nbsp;手机号' + response[i].tel);
                        $('<span>').appendTo(div1).html();
                        $('<p class="xiugai">修改</p>').appendTo(div2);
                        $('<p class="shanchu">删除</p>').appendTo(div2);
                            var lpl=response[i].id
                    };
                    tiaozhuan(lpl);
                }
            });

            $('#newAddress').click(function (e) {
                e.preventDefault();
                window.location.href = '/lxcdingdanshouhuodizhi?0'
            });

            function tiaozhuan(lpl) {
                $(".xiugai").click(function (e) {
                    e.preventDefault();
                    window.location.href = '/lxcdingdanshouhuodizhi?'+lpl+''
                });
                $(".shanchu").click(function (e) { 
                    e.preventDefault();
                    $(this).parent().parent().remove();
                });
            }

        }

    }






    function jisuan() {

        { //表操作
            //加减法
            $("#quanxuan").click(function (e) {
                $('.xunzhong').prop('checked', 'checked');
                $('#inpHeader').prop('checked', 'checked')
            });

            $('#inpHeader').click(function (e) {
                if ($('#inpHeader').prop('checked') == false) {
                    $('.xunzhong').prop('checked', false);
                } else {
                    $('.xunzhong').prop('checked', 'checked');
                }
            });

            $(".xunzhong").click(function (e) {
                for (var p = 0; p < $('.xunzhong').length; p++) {
                    if ($('.xunzhong').eq(p).prop('checked') == false) {
                        $('#inpHeader').prop('checked', false);
                        return;
                    } else {
                        $('#inpHeader').prop('checked', true)
                    }
                }

            });



            $("#piliangdel").click(function (e) {

                if ($('#inpHeader').prop('checked') == true) {
                    $('#inpHeader').parent().parent().parent().remove();
                } else {
                    $('.xunzhong').each(function (i, v) {
                        if ($(this).prop('checked') == true) {
                            $(this).parent('tr').remove();
                        }
                    })

                }

            });

            $('.jian').click(function (e) {
                thit = this;
                var offset = $(this).siblings('span');
                var shuliang = Number($(offset).html());
                if (shuliang < 1) {
                    shuliang = 1;
                }
                $(offset).html(shuliang -= 1);
                jiaqian(thit, shuliang);
            });
            $('.jia').click(function (e) {
                thit = this;
                var offset = $(this).siblings('span');
                var shuliang = Number($(offset).html());
                $(offset).html(shuliang += 1);
                jiaqian(thit, shuliang);
            });

            function jiaqian(thit, shuliang) {
                var dj = parseFloat($(thit).parent().siblings('.danjia').children('span').html());
                var zj = $(thit).parent().siblings('.jiaqian').children('span');
                $(zj).html(dj * shuliang);
                zjq(zj);
            }

            function zjq(zj) {

                var arr = 0;
                $(".jiaqian span").each(function (i, v) {
                    console.log(parseFloat($(this).html()));
                    arr += parseFloat($(this).html());
                    console.log(arr);
                });


                $("#zhongjine").html(arr);
                $("#zhongjine1").html(arr);
                $("#zhongjine2").html(arr);
                $("#zhongjine3").html(arr);


            }
            $(".del").click(function (e) {
                $(this).parent().remove();


            });
        }

    };

    { //城市三级联动
        $(".opt").click(function (e) {
            alert('请选择城市')
        });
        var iNum1;
        var iNum2;
        var aProvince = ['湖北', '江苏', '安徽'];
        var aCity = [
            ['武汉', '黄冈', '荆门'],
            ['南京', '无锡', '镇江'],
            ['合肥', '安庆', '黄山']
        ];
        var aCountry = [
            [
                ['武汉1', '武汉2'],
                ['黄冈1', '黄冈2'],
                ['荆门1', '荆门2']
            ],
            [
                ['南京1', '南京2'],
                ['无锡1', '无锡2'],
                ['镇江1', '镇江2']
            ],
            [
                ['合肥1', '合肥2'],
                ['安庆1', '安庆2'],
                ['黄山1', '黄山2']
            ]
        ];

        $(function () {
            for (var i = 0; i < aProvince.length; i++) {
                $('#selProvince').append('<option>' + aProvince[i] + '</option>');
            };
            $('#selProvince').change(function () {
                $('#selCity').children().not(':eq(0)').remove();
                $('#selCountry').children().not(':eq(0)').remove();
                iNum1 = $(this).children('option:selected').index();
                var aaCity = aCity[iNum1 - 1];
                for (var j = 0; j < aaCity.length; j++) {
                    $('#selCity').append('<option>' + aaCity[j] + '</option>');
                }
            });
            $('#selCity').change(function () {
                $('#selCountry').children().not(':eq(0)').remove();
                iNum2 = $(this).children('option:selected').index();
                var aaCountry = aCountry[iNum1 - 1][iNum2 - 1];
                for (var k = 0; k < aaCountry.length; k++) {
                    $('#selCountry').append('<option>' + aaCountry[k] + '</option>');
                }
            })
        });


    } {
        $(".tjdd div button").click(function (e) {
            window.location.href = '/lxcchenggongdingdan'
        });
    }
</script>